/* index的样式表 */


/* 顶部导航条的样式 */

.topbar-wrapper {
    width: 100%;
    /* 写弹出层的时候会把导航条拉高，所以这里写死 */
    height: 40px;
    line-height: 40px;
    background-color: #333;
}

.topbar a {
    font-size: 12px;
    color: #b0b0b0;
    /* 整个块都可以点，不是只有字可以点 */
    display: block;
}

.topbar a:hover {
    color: #fff;
}

.topbar .line {
    color: #424242;
    font-size: 12px;
    /* 拉开一点距离 */
    margin: 0 8px;
    /* 往上挪挪，对齐 */
    margin-top: -1px;
}


/* li也要在容器里向左浮动 */

.service,
.topbar li {
    float: left;
}

.app {
    /* 父相子绝 */
    /* 希望小三角跟父元素来相对定位，不希望它跟body来定位 */
    position: relative;
}

.app:hover .qrcode,
.app:hover::after {
    /* 这边不能再直接.app:hover .app::after找不到这个伪元素，所以不能绑定给app，要给上一级绑定 */
    /* 弹幕里面教的 .app:hover.app::after或.app:hover::after  中间没有空格，就可以了*/
    /* 老师的做法是将hover绑定到父元素，用父元素hover来找伪元素  .app-wrapper:hover > .app::after */
    display: block;
    /* 使用height来改变 */
    height: 148px;
}


/* 设置下拉的小三角 */

.app::after {
    display: none;
    /* 纯css画那个小三角，用的就是一个宽高都是0的div，它的border就是4个小三角 */
    /* 不写content，after伪类出不来 */
    content: '';
    /* 开启绝对定位，定位置 */
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top: none;
    border-bottom-color: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    /* 写这个小三角要先将二维码的弹出层先关掉，写完再打开 */
}

.app .qrcode {
    /* 先隐藏 */
    /* display: none; */
    /* 打开弹出层发现小三角不见了，因为弹出层实际上是把父元素撑开了，所以小三角跑弹出层下面去了 */
    /* 因此这边也要开启绝对定位 */
    position: absolute;
    /* 弹出层左右居中 */
    left: -38px;
    width: 124px;
    /* 当高度为0且overflow为hidden，也可以隐藏内容 */
    height: 0px;
    overflow: hidden;
    background-color: #fff;
    /* 不设置这个，底下那行字会出去，不在框里面 */
    /* 因为行高会继承，这行字继承了父元素的行高40px */
    /* 高度148px，如果不设置margin-top方向的17px，字还在框里的，因为高度够 */
    /* 而我们因为要居中所以设置了margin-top的17px，这就导致字的行高不够，被挤下去了 */
    /* 所以这里要设置字的行高为1 */
    line-height: 1;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    /* transition完成动画的效果 */
    transition: height 0.5s;
    z-index: 9999;
}

.app .qrcode img {
    width: 90px;
    /* 水平居中，为啥不能用auto？因为img是行内元素，auto不起作用，auto只对块元素起作用 */
    margin: 17px;
    margin-bottom: 10px;
}

.app .qrcode span {
    color: black;
    font-size: 14px;
}

.shop-cart {
    margin-left: 26px;
}


/* 把hover绑定给shop-cart，因为后面它要整个改变，所以绑定给父元素好一些 */

.shop-cart:hover a {
    background-color: #fff;
    color: #ff6700;
}

.shop-cart a {
    background-color: #424242;
    width: 120px;
    /* 文字居中，而不是元素居中，元素位置已经定了，是元素内部的文字要居中，所以不是用margin */
    text-align: center;
}

.shop-cart i {
    margin-right: 2px;
}

.shop-cart,
.user-info {
    float: right;
}

.header-wrapper {
    position: relative;
}

.header {
    height: 100px;
    /* background-color: #bfa; */
}

.header .logo {
    /* 如果不做处理，会有外边距重叠的作用，所以要在header也加一个clearfix */
    /* 没有也没关系，因为浮动了 */
    float: left;
    margin-top: 22px;
    width: 55px;
    height: 55px;
    position: relative;
    overflow: hidden;
    /* 隐藏logo中的文字 */
    /* text-indent: -9999px; */
}

.header .logo a {
    position: absolute;
    width: 55px;
    height: 55px;
    background-color: red;
    background-image: url(../img/logo.png);
}

.header .nav-wrapper {
    float: left;
    margin-left: 7px;
}

.header .nav {
    /* background-color: #bfa; */
    height: 100px;
    line-height: 100px;
    padding-left: 58px;
    /* margin: 20px 0; */
}


/* 因为左侧导航条写在全部商品里面，如果是.nav li的话就都包括进去了，可是左侧导航条不向左浮动，所以改为子元素 */

.nav>li {
    float: left;
    margin-right: 20px;
}

.allgoods-wrapper {
    position: relative;
}

.left-menu {
    width: 234px;
    height: 420px;
    padding: 20px 0;
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
    z-index: 999;
    left: -120px;
    line-height: 1;
}

ul.left-menu li a {
    display: block;
    height: 42px;
    line-height: 42px;
    color: white;
    padding: 0 30px;
    font-size: 14px;
}

ul.left-menu li a:hover {
    color: white;
    background-color: #ff6700;
}

.left-menu a i {
    float: right;
    line-height: 42px;
}

.nav-wrapper li a {
    display: block;
    font-size: 16px;
    color: black;
}

.nav-wrapper li a:hover {
    color: #ff6700;
}

.allgoods {
    visibility: hidden;
}


/* 这里goods-info的样式要写在hover前面，不是又会被覆盖【后写的样式会覆盖先写的样式】 */

.nav .goods-info {
    /* height: 228px; */
    height: 0;
    width: 100%;
    /* background-color: #bfa; */
    overflow: hidden;
    /* 边框和阴影现在都不显示，等要它显示的时候再显示 */
    /* border: 1px solid rgb(224, 224, 224); */
    /* 如果是  box-shadow: 0 0 10px rgba(0, 0, 0, .2); 的话，则上面也会有阴影，所以将阴影往下挪一挪*/
    /* box-shadow: 0 5px 3px rgba(0, 0, 0, .2); */
    /* 开启绝对定位，相对于header-wrapper定位，因为header-wrapper是全屏的，而nav-wrapper不是全屏。这也是为什么用了两层div的原因 */
    position: absolute;
    /* 写偏移量 */
    top: 100px;
    left: 0;
    transition: height 0.3s;
    /* 层级最高，因为它要覆盖掉别的元素 */
    z-index: 9999;
}

.nav .show-goods:hover~.goods-info,
.goods-info:hover {
    height: 228px;
    border: 1px solid rgb(224, 224, 224);
    /* 如果是  box-shadow: 0 0 10px rgba(0, 0, 0, .2); 的话，则上面也会有阴影，所以将阴影往下挪一挪*/
    box-shadow: 0 5px 3px rgba(0, 0, 0, .2);
}

.search-wrapper {
    width: 296px;
    height: 50px;
    margin-top: 25px;
    float: right;
    background-color: #bfa;
    border: 1px solid rgb(224, 224, 224);
}


/* 向左浮动，因为input和button中间有缝隙，浮动了之后就没有缝隙了 */

.search-wrapper .search-input {
    width: 224px;
    border: none;
    float: left;
    height: 50px;
    padding: 0 10px;
    font-size: 16px;
    /* 为什么这里的box-sizing不起作用呢？ */
    /* box-sizing: content-box !important; */
}

.search-wrapper .search-input:focus {
    position: relative;
    z-index: 4;
    outline: 1px solid #ff6700;
}

.search-wrapper .search-btn {
    float: left;
    height: 50px;
    width: 52px;
    padding: 0;
    border: none;
    background-color: #fff;
    color: #616161;
    font-size: 16px;
    border-left: 1px solid rgb(224, 224, 224);
}

.banner {
    position: relative;
    height: 460px;
}


/* 开启绝对定位，这样每张图片都盖到一起了 */


/* 父元素还得开相对定位，不然的话就没东西了。因为子元素宽度100%，是相对父元素，父元素又absolute，考虑子元素的宽度，这样就没宽度了，所以父元素banner要开相对定位 */

.banner .img-list li {
    position: absolute;
}

.banner img {
    width: 100%;
    /* 图片间的间隔去掉 */
    vertical-align: top;
}

.pointer {
    position: absolute;
    /* 此时点点会跑右上角，因为banner开启了相对定位，img-list是绝对定位，脱离了文档流，导致父元素高度塌陷 */
    /* 因此banner要设置高度 */
    /* 这种高度塌陷不能用clearfix来解决，clearfix只能解决float带来的高度塌陷 */
    bottom: 22px;
    right: 35px;
}

.pointer a {
    float: left;
    width: 6px;
    height: 6px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .4);
    margin-left: 6px;
}

.pointer a:hover,
.pointer a.active {
    background-color: rgba(255, 255, 255, .4);
    border: 2px solid rgba(0, 0, 0, .4);
}

.prev-next a {
    width: 41px;
    height: 69px;
    background-image: url(../img/icon-slides.png);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.prev-next .prev {
    left: 234px;
    background-position: -84px 0;
}

.prev-next .prev:hover {
    background-position: 0 0;
}

.prev-next .next {
    right: 0;
    background-position: -125px 0;
}

.prev-next .next:hover {
    background-position: -42px 0;
}

.back-top {
    width: 26px;
    height: 206px;
    background-color: orange;
    position: fixed;
    bottom: 60px;
    right: 50%;
    margin-right: -639px;
    /* 布局的等式
      left + margin-left + width + margin-right + right = 视图的宽度
      auto + 0 + 26 + 0 + 50% = 视图的宽度
      margin-right设为-639px，auto就得加639px，所以就把这个div往右移
    */
}

.ad {
    /* background-color: red; */
    height: 190px;
    margin-top: 14px !important;
}

.ad .shortcut,
.ad .ad-img,
.ad li {
    float: left;
}

.ad .shortcut {
    width: 228px;
    height: 168px;
    background-color: #5f5750;
    margin-right: 14px;
    padding-top: 2px;
    padding-left: 6px;
}

.ad .shortcut li {
    position: relative;
}

.ad .shortcut li::before {
    content: '';
    position: absolute;
    width: 64px;
    height: 1px;
    background-color: #665e57;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
}

.ad .shortcut li::after {
    content: '';
    position: absolute;
    height: 70px;
    width: 1px;
    background-color: #665e57;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
}

.ad .shortcut a {
    color: #cfccca;
    display: block;
    height: 84px;
    width: 76px;
    text-align: center;
    font-size: 12px;
    overflow: hidden;
}

.ad .shortcut a:hover {
    color: #fff;
}

.ad .shortcut i {
    display: block;
    /* color: #cfccca; */
    margin-top: 20px;
    font-size: 20px;
}

.ad .ad-img li {
    width: 316px;
    margin-right: 15px;
}

.ad .ad-img li:last-child {
    margin: 0;
}

.ad .ad-img img {
    width: 100%;
    vertical-align: top;
}